﻿@model SiteConfigViewModel
<div class="layui-row layui-col-space15">
	<div class="layui-col-md12">
		<div class="layui-card">
			<div class="layui-card-header">缩略图设置</div>
			<div class="layui-card-body" pad15>
				<form asp-controller="SiteConfig" asp-action="ThumbConfig" class="layui-form" wid100 lay-filter="">
					<div class="layui-form-item">
						<label class="layui-form-label">缩略图算法</label>
						<div class="layui-input-block">
							<select asp-for="ThumbsConfigEntity.ThumbsMode">
								<option value="0">常规算法：宽度和高度都大于0时，直接缩小成指定大小，其中一个为0时，按比例缩小。</option>
								<option value="1">裁剪法：宽度和高度都大于0时，先按最佳比例缩小再裁剪成指定大小，其中一个为0时，按比例缩小。</option>
								<option value="2">补充法：在指定大小的背景图上附加上按最佳比例缩小的图片。</option>
							</select>
							<span asp-validation-for="ThumbsConfigEntity.ThumbsMode" style="color:red;"></span>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">缩略图底色</label>
						<div class="layui-input-inline">
							<div class="layui-input-inline" style="width:100px;">
								<input type="text" class="layui-input" asp-for="ThumbsConfigEntity.AddBackColor" placeholder="请选择颜色">
							</div>
							<div class="layui-inline" style="left: -11px;">
								<div id="ctlAddBackColor"></div>
							</div>
						</div>
						<div class="layui-form-mid layui-word-aux">
							使用补充算法时将以此设置的背景色填充
							<span asp-validation-for="ThumbsConfigEntity.AddBackColor" style="color:red;"></span>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">缩略图默认宽度</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" asp-for="ThumbsConfigEntity.ThumbsWidth" placeholder="">
						</div>
						<div class="layui-form-mid layui-word-aux">
							像素。设为0时，将以高度为准按比例缩小。
							<span asp-validation-for="ThumbsConfigEntity.ThumbsWidth" style="color:red;"></span>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">缩略图默认高度</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" asp-for="ThumbsConfigEntity.ThumbsHeight" placeholder="">
						</div>
						<div class="layui-form-mid layui-word-aux">
							像素。设为0时，将以宽度为准按比例缩小。
							<span asp-validation-for="ThumbsConfigEntity.ThumbsHeight" style="color:red;"></span>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">水印类型</label>
						<div class="layui-input-block">
							<select id="dropWaterMarkType" lay-filter="WaterMarkType" asp-for="WaterMarkConfigEntity.WaterMarkType">
								<option value="0">文字水印</option>
								<option value="1">图片水印</option>
							</select>
							<span asp-validation-for="WaterMarkConfigEntity.WaterMarkType" style="color:red;"></span>
						</div>
					</div>
					<div id="ctlTextWaterMark" style="display:none;">
						<div class="layui-form-item">
							<label class="layui-form-label">水印文字</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.Text" placeholder="">
							</div>
							<div class="layui-form-mid layui-word-aux">
								水印文字字数不宜超过15个字符，不支持HTML标记。
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.Text" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">文字字体</label>
							<div class="layui-input-block">
								<select asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneType">
									<option value="宋体">宋体</option>
									<option value="楷体_GB2312">楷体</option>
									<option value="仿宋_GB2312">新宋体</option>
									<option value="黑体">黑体</option>
									<option value="隶书">隶书</option>
									<option value="幼圆">幼圆</option>
									<option value="Andale Mono">Andale Mono</option>
									<option value="Arial">Arial</option>
									<option value="Arial Black">Arial Black</option>
									<option value="Book Antiqua">Book Antiqua</option>
									<option value="Century Gothic">Century Gothic</option>
									<option value="Comic Sans MS">Comic Sans MS</option>
									<option value="Courier New">Courier New</option>
									<option value="Georgia">Georgia</option>
									<option value="Impact">Impact</option>
									<option value="Tahoma">Tahoma</option>
									<option value="Times New Roman">Times New Roman</option>
									<option value="Trebuchet MS">Trebuchet MS</option>
									<option value="Script MT Bold">Script MT Bold</option>
									<option value="Stencil">Stencil</option>
									<option value="Verdana">Verdana</option>
									<option value="Lucida Console">Lucida Console</option>
								</select>
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneType" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">字体样式</label>
							<div class="layui-input-block">
								<select asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneStyle">
									<option value="Regular">常规</option>
									<option value="Bold">加粗</option>
									<option value="Italic">倾斜</option>
									<option value="Strikeout">中间有直线通过</option>
									<option value="Underline">带下划线</option>
								</select>
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneStyle" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">文字大小</label>
							<div class="layui-input-block">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneSize" placeholder="">
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneSize" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">文字颜色</label>
							<div class="layui-input-block">
								<div class="layui-input-inline" style="width:100px;">
									<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneColor" placeholder="请选择颜色">
								</div>
								<div class="layui-inline" style="left: -11px;">
									<div id="ctlWaterMarkTextFoneColor"></div>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">文字边框大小</label>
							<div class="layui-input-block">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneBorder" placeholder="设置为0时没有边框">
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneBorder" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">文字边框颜色</label>
							<div class="layui-input-block">
								<div class="layui-input-inline" style="width:100px;">
									<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.FoneBorderColor" placeholder="请选择颜色">
								</div>
								<div class="layui-inline" style="left: -11px;">
									<div id="ctlWaterMarkTextFoneBorderColor"></div>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">坐标起点位置</label>
							<div class="layui-input-block">
								<select asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.WaterMarkPosition">
									<option value="WM_TOP_LEFT">左上</option>
									<option value="WM_TOP_RIGHT">右上</option>
									<option value="WM_BOTTOM_RIGHT">右下</option>
									<option value="WM_BOTTOM_LEFT">左下</option>
									<option value="WM_SetByManual">手动设置</option>
								</select>
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.WaterMarkPosition" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">坐标位置</label>
							<div class="layui-form-mid layui-word-aux">X:</div>
							<div class="layui-input-inline" style="width:100px;">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.WaterMarkPositionX">
							</div>
							<div class="layui-form-mid layui-word-aux">
								像素
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.WaterMarkPositionX" style="color:red;"></span>
							</div>
							<div class="layui-form-mid layui-word-aux">Y:</div>
							<div class="layui-input-inline" style="width:100px;">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkTextInfo.WaterMarkPositionY">
							</div>
							<div class="layui-form-mid layui-word-aux">
								像素
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkTextInfo.WaterMarkPositionY" style="color:red;"></span>
							</div>
							<div class="layui-form-mid layui-word-aux">
								坐标起点位置设置为手动设置时才有效。
							</div>
						</div>
					</div>
					<div id="ctlPicWaterMark" style="display:none;">
						<div class="layui-form-item">
							<label class="layui-form-label">水印图片文件名</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.ImagePath">
							</div>
							<div class="layui-form-mid layui-word-aux">
								请填写图片文件的相对路径
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.ImagePath" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">缩小比例</label>
							<div class="layui-form-mid layui-word-aux">
								当水印图片宽度或高度大于要加水印图片的1/
							</div>
							<div class="layui-input-inline" style="width:100px;">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPercent">
							</div>
							<div class="layui-form-mid layui-word-aux">
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPercent" style="color:red;"></span>时，按
							</div>
							<div class="layui-input-inline" style="width:120px;">
								<select id="dropWaterMarkPercentType" lay-filter="WaterMarkPercentType" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPercentType">
									<option value="AutoSet">自动计算值</option>
									<option value="ManualSet">手动设置值</option>
								</select>
							</div>
							<div id="divWaterMarkPercent" class="layui-input-inline" style="display:none;width:120px;">
								1/<input type="text" class="layui-input" style="display: inline;width:90%;" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkThumbPercent">
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkThumbPercent" style="color:red;"></span>
							</div>
							<div class="layui-form-mid layui-word-aux">比例缩小。</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">水印图片透明度</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.Transparence">
							</div>
							<div class="layui-form-mid layui-word-aux">
								%，0为完全透明，100为完全不透明
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.Transparence" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">坐标起点位置</label>
							<div class="layui-input-block">
								<select asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPosition">
									<option value="WM_TOP_LEFT">左上</option>
									<option value="WM_TOP_RIGHT">右上</option>
									<option value="WM_BOTTOM_RIGHT">右下</option>
									<option value="WM_BOTTOM_LEFT">左下</option>
									<option value="WM_SetByManual">手动设置</option>
								</select>
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPosition" style="color:red;"></span>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">坐标位置</label>
							<div class="layui-form-mid layui-word-aux">X:</div>
							<div class="layui-input-inline" style="width:100px;">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPositionX">
							</div>
							<div class="layui-form-mid layui-word-aux">
								像素
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPositionX" style="color:red;"></span>
							</div>
							<div class="layui-form-mid layui-word-aux">Y:</div>
							<div class="layui-input-inline" style="width:100px;">
								<input type="text" class="layui-input" asp-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPositionY">
							</div>
							<div class="layui-form-mid layui-word-aux">
								像素
								<span asp-validation-for="WaterMarkConfigEntity.WaterMarkImageInfo.WaterMarkPositionY" style="color:red;"></span>
							</div>
							<div class="layui-form-mid layui-word-aux">
								坐标起点位置设置为手动设置时才有效。
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="">确认保存</button>
							<span style="color:red; font-size:18px;">@Html.ValidationSummary(true)</span>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

@section scripts{
	<script type="text/javascript">
		function ShowTabWaterMark() {
			var type = $("#dropWaterMarkType").val();
			if (type == "0") {
				document.getElementById('ctlTextWaterMark').style.display = "";
				document.getElementById('ctlPicWaterMark').style.display = "none";
			}
			else {
				document.getElementById('ctlTextWaterMark').style.display = "none";
				document.getElementById('ctlPicWaterMark').style.display = "";
			}
		}
		function SelectWaterMarkPercentType() {
			var type = $("#dropWaterMarkPercentType").val();
			if (type == "ManualSet") {
				document.getElementById('divWaterMarkPercent').style.display = "";
			}
			else {
				document.getElementById('divWaterMarkPercent').style.display = "none";
			}
		}
		layui.use(['form', 'colorpicker'], function () {
			var $ = layui.$;
			var colorpicker = layui.colorpicker;
			var form = layui.form;

			var AddBackColor = $('#ThumbsConfigEntity_AddBackColor').val();
			var WaterMarkTextFoneColor = $('#WaterMarkConfigEntity_WaterMarkTextInfo_FoneColor').val();
			var WaterMarkTextFoneBorderColor = $('#WaterMarkConfigEntity_WaterMarkTextInfo_FoneBorderColor').val();
			//缩略图底色
			colorpicker.render({
				elem: '#ctlAddBackColor'
				, color: AddBackColor
				, change: function (color) {
					$('#ThumbsConfigEntity_AddBackColor').val(color);
				}
				, done: function (color) {
					$('#ThumbsConfigEntity_AddBackColor').val(color);
				}
			});
			//水印文字颜色
			colorpicker.render({
				elem: '#ctlWaterMarkTextFoneColor'
				, color: WaterMarkTextFoneColor
				, change: function (color) {
					$('#WaterMarkConfigEntity_WaterMarkTextInfo_FoneColor').val(color);
				}
				, done: function (color) {
					$('#WaterMarkConfigEntity_WaterMarkTextInfo_FoneColor').val(color);
				}
			});
			//水印文字边框颜色
			colorpicker.render({
				elem: '#ctlWaterMarkTextFoneBorderColor'
				, color: WaterMarkTextFoneBorderColor
				, change: function (color) {
					$('#WaterMarkConfigEntity_WaterMarkTextInfo_FoneBorderColor').val(color);
				}
				, done: function (color) {
					$('#WaterMarkConfigEntity_WaterMarkTextInfo_FoneBorderColor').val(color);
				}
			});

			form.on('select(WaterMarkType)', function (data) {
				ShowTabWaterMark();
			});
			form.on('select(WaterMarkPercentType)', function (data) {
				SelectWaterMarkPercentType();
			});
		});

		$(function () {
			ShowTabWaterMark(); 
			SelectWaterMarkPercentType();
		});
	</script>
}
